<template>
  <div>
    <basic-container>
      <div class="boxsty zhiBiao">
        <div :height="searchheight">
          <div class="tabletext">领导奖金查询</div>
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <el-row v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="姓名">
                <el-input
                  v-model="dataForm.ryXm"
                  placeholder="姓名"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="单位名称">
                <!-- <el-select v-model="dataForm.deptid" placeholder="请选择负责部门" class="xiaLa mr20" @change="switchDepartment">
                            <el-option v-for="(item,index) in bmData" :key="index" :label="item.deptName"
                                        :value="item.deptId"></el-option>
                            </el-select> -->
                <el-input
                  v-model="dataForm.ryGzdw"
                  placeholder="单位名称"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="岗位层级">
                <el-select
                  :clearable="true"
                  v-model="dataForm.ryXzjb"
                  placeholder="请选择"
                  style="width: 150px"
                >
                  <el-option
                    v-for="(item, index) in userZjOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              
              <el-form-item>
                <el-button
                  type="primary"
                  class="marginLeft"
                  plain
                  @click="getDataList(1)"
                  >检索</el-button
                >
              </el-form-item>
            </el-form>
          </el-row>
          <el-table
          :data="tableData"
          ref="multipleTable"
          border
          v-loading="loading"
          max-height="600"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column
            prop=""
            label="序号"
            min-width="60"
            :formatter="nShowIndex"
            align="center"
            fixed="left"
          ></el-table-column>
            <el-table-column
            prop="ryXm"
            label="姓名"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ryGzdw"
            label="单位"
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ryZwgz"
            label="职务"
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ryXzjb"
            label="级别判断"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ryje"
            label="奖金总额"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop=""
            label="奖金明细"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
                <el-button type="primary" @click="checkDetail(scope.row)">点击查看明细</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
        </div>
        <!--奖金明细-->
        <bonusDetails ref="bonusDetails"></bonusDetails>
    </basic-container>
  </div>
</template>

<script>
import { remote as remoteDict } from "@/api/admin/dict";
import bonusDetails from './bonusDetails'
import { fetchList} from '@/api/jiangjin/secLeaderBonus';

export default {
    components:{
        bonusDetails
    },
  data() {
    return {
      searchadvanced: true,
      searchheight: "0",
      tableData: [
        // {ryName:"郭延峰",deptName:"共享运营有限公司成都中心",ryZhiwei:"党委书记、总经理",ryZwjb:"正处级",ryzje:"1200000"},
        // {ryName:"唐艳秋",deptName:"共享运营公司吉林业务部",ryZhiwei:"副总经理兼薪酬服务分部经理",ryZwjb:"副处级",ryzje:"500000"},
        // {ryName:"任延哲",deptName:"共享运营公司吉林业务部",ryZhiwei:"副总经理兼综合分部经理",ryZwjb:"副处级",ryzje:"500000"},
        // {ryName:"马盛红",deptName:"共享运营公司吉林业务部",ryZhiwei:"党总支书记、总经理",ryZwjb:"正处级",ryzje:"1200000"},
        // {ryName:"曹志新",deptName:"共享运营公司天津业务部",ryZhiwei:"党总支书记、人力资源业务总经理",ryZwjb:"正处级",ryzje:"1200000"},
        // {ryName:"陈国朗",deptName:"共享运营公司乌鲁木齐业务部",ryZhiwei:"党总支书记、总经理",ryZwjb:"正处级",ryzje:"1200000"},
        // {ryName:"张锡磊",deptName:"共享运营有限公司大庆中心",ryZhiwei:"党委书记、总经理",ryZwjb:"正处级",ryzje:"1200000"},
        // {ryName:"马平原",deptName:"共享运营有限公司西安中心",ryZhiwei:"党委书记、总经理 ",ryZwjb:"正处级",ryzje:"1200000"},
        // {ryName:"刘增慧",deptName:"共享运营公司北京直属业务部",ryZhiwei:"人力资源业务总经理",ryZwjb:"正处级",ryzje:"1200000"},
      ],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      userZjOptions: [
        {label:"领导正职",value:"领导正职"},
        {label:"领导副职",value:"领导副职"},
        {label:"副总师",value:"副总师"},
      ],
      dataForm: {},
      loading:false
    };
  },
  created() {
    //this.getremoteDict();
    this.getDataList()
  },
  methods: {
      getDataList(){
          fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(res=>{
          this.tableData=res.data.data.records
          this.totalPage=res.data.data.total
          })
      },
      //查看明细
      checkDetail(row){
          this.$nextTick(()=>{
              this.$refs.bonusDetails.init(row)
          })
      },
    getremoteDict() {
      remoteDict("user_zj").then((response) => {
        this.userZjOptions = response.data.data;
      });
    },
    //职务级别转换
    zjzh(value) {
      for (var a in this.userZjOptions) {
        if (this.userZjOptions[a].value == value) {
          return this.userZjOptions[a].label;
        }
      }
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1 + this.pageSize * (this.pageIndex - 1);
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
  },
};
</script>

<style>
</style>